<template>
  <div class="audit--registTerminal-view">

    <el-form :inline="true" label-position="right" label-width="110px" size="small"
             class="filter-form-inline">

      <el-row>

        <el-col :span="8">
          <el-form-item label="流程编号：">
            {{ detailData.processNo }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="创建时间：">
            {{ dateFormat('yyyy-mm-dd',detailData.startTime) }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="创建人：">
            {{ detailData.initiator }}
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <item-title title="产品信息" />

    <el-form :inline="true"  label-position="right" label-width="110px" size="small"
             class="filter-form-inline">

      <el-row>

        <el-col :span="8">
          <el-form-item label="产品通用名：">
            {{ datas.productPopularName }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="商品名：">
            {{ datas.productName }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="包装规格：">
            {{ datas.packSpecs }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="生产厂家：">
            {{ datas.producer }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="市场价：">
            {{ datas.productInfoDetail?.marketPrice }}元
            <span v-if="datas.sellUnit">/{{ getLabel('sell_unit',datas.sellUnit) }}</span>
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <item-title title="渠道客户信息" />

    <el-form :inline="true"  label-position="right" label-width="110px" size="small"
             class="filter-form-inline">

      <el-row>

        <el-col :span="8">
          <el-form-item
            v-if="!isDirect"
            label="营销模式："
          >
            <!--            {{ getLabel('agent_type',datas.agentType) }}-->
            <!--            [{{ getLabel(datas.agentType, datas.agentAttribute) }}]-->
            <span v-if="datas.agentAttribute == 1">独家招商</span>
            <span v-else-if="datas.agentAttribute == 2">精细招商</span>
          </el-form-item>
          <el-form-item
            v-else
            label="营销模式："
          >
            终端直销
          </el-form-item>
        </el-col>

        <el-col
          v-if="!isDirect"
          :span="8"
        >
          <el-form-item
            v-if="datas.agentType == 'agent'"
            label="代理商名称："
          >
            <el-link
              style="display: flex;align-items: center"
              :underline="false"
              type="primary"
              @click="agentClick"
            >{{ datas.agentName }}</el-link>
          </el-form-item>
          <el-form-item
            v-else
            label="兼职名称："
          >
            <el-link
              style="display: flex;align-items: center"
              :underline="false"
              type="primary"
              @click="agentClick"
            >{{ datas.userName }}</el-link>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="交易价：">

            <el-link
              v-if="datas.tradePrice && !isDirect"
              style="display: flex;align-items: center"
              :underline="false"
              type="primary"
              @click="tradePriceClick"
            >
              {{ datas.tradePrice }}元
              <span v-if="datas.sellUnit">/{{ getLabel('sell_unit',datas.sellUnit) }}</span>
            </el-link>

            <div v-else-if="datas.tradePrice">
              {{ datas.tradePrice }}元
              <span v-if="datas.sellUnit">/{{ getLabel('sell_unit',datas.sellUnit) }}</span>
            </div>

          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="负责营销职员：">
            {{ detailData.data?.headName }}
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <item-title title="注册终端信息" />

    <el-table
      :data="list"
      border
    >
      <el-table-column
        type="index"
        align="center"
      />
      <el-table-column
        header-align="center"
        align="center"
        label="终端名称"
        prop="terminalName"
        show-overflow-tooltip
      />
      <el-table-column
        header-align="center"
        align="center"
        label="所在地区"
        show-overflow-tooltip
      >
        <template #default="scope">
          {{ scope.row.provinceName }}/{{ scope.row.cityName }}/{{ scope.row.areaName }}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="终端类型"
        show-overflow-tooltip
      >
        <template #default="scope">
          {{ getLabel('app_mode',scope.row.terminalType) }}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="准入模式"
        show-overflow-tooltip
      >
        <template #default="scope">
          <span>{{ getLabel('access_mode', scope.row.accessMode) }}</span>
        </template>
      </el-table-column>
      <el-table-column

        header-align="center"
        align="center"
        label="终端价(元)"
        show-overflow-tooltip
      >
        <template #default="scope">
          {{ scope.row.terminalPrice }}
        </template>
      </el-table-column>
      <el-table-column
              v-if="route.query.type != 'terminalSetAgentDirectCheck'"
        header-align="center"
        align="center"
        label="关联招商规划"
        prop="planName"
        show-overflow-tooltip
      />
      <el-table-column
              v-if="route.query.type != 'terminalSetAgentDirectCheck'"
        header-align="center"
        align="center"
        label="开发期限至"
        show-overflow-tooltip
      >
        <template #default="scope">
          <span v-if="scope.row.expireTime">{{ dateFormat('yyyy-mm-dd',scope.row.expireTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
              v-if="route.query.type != 'terminalSetAgentDirectCheck'"
        header-align="center"
        align="center"
        label="开发保证金(元)"
        show-overflow-tooltip
      >
        <template #default="scope">

          <span v-if="scope.row.devEarnestMoney">{{ scope.row.devEarnestMoney }}</span>
          <span v-else>未设置</span>
        </template>
      </el-table-column>
      <el-table-column
              v-if="route.query.type != 'terminalSetAgentDirectCheck'"
        header-align="center"
        align="center"
        label="最低销量"
        show-overflow-tooltip
      >
        <template #default="scope">
          <span v-if="scope.row.minSale">{{ scope.row.minSale }}{{ getLabel('sell_unit',datas.sellUnit) }}/{{ getLabel('sell_num_unit',scope.row.minSaleUnit) }}</span>
          <span v-else>未设置</span>
        </template>
      </el-table-column>
      <el-table-column
              v-if="route.query.type != 'terminalSetAgentDirectCheck'"
        header-align="center"
        align="center"
        label="销量保证金(元)"
        show-overflow-tooltip
      >
        <template #default="scope">
          <span v-if="scope.row.sellEarnestMoney">{{ scope.row.sellEarnestMoney }}</span>
          <span v-else>未设置</span>
        </template>
      </el-table-column>

    </el-table>

    <detail-drawer
      ref="detailDrawer"
      custom-title
      :size-width="1000"
    >
      <template #title>
        <div v-if="!isAgent">
          <span>招商要素编号 </span>
          <span class="drawerTitle">{{ agentProduct.agentProductNumber }}</span>
        </div>
        <div v-else>
          <span v-if="datas.agentType == 'agent'">代理商：{{ datas.agentName }}</span>
          <span v-else>兼职：{{ datas.userName }}</span>
        </div>

      </template>
      <template #contents>

        <template v-if="!isAgent">

          <productAndPriceInfoView :id="datas.agentProductId" />
          <!--          <item-title title="基本信息" />-->

          <!--          <product-and-price-detail-view :datas="agent" :agent-product="agentProduct" :type="agent.agentType" disabled />-->

          <!--          <item-title title="修改记录" />-->

          <!--          <operation-view :id="agentProduct.id" mode="agent_product" />-->

        </template>

        <template v-else>

          <agent-info :id="agentId" />

        </template>

      </template>
    </detail-drawer>

  </div>
</template>

<script>
import productAndPriceInfoView from '../../../../commonView/detailComponents/agent/productAndPriceInfoView'
import agentInfo from '../../../../commonView/detailComponents/agent/agentInfo'
import productAndPriceDetailView
  from '../../../../channel/signedAgent/detail/modules/productAndPrice/modules/productAndPriceDetailView'
import { useRoute } from 'vue-router'
// 注册终端审批
import {defineComponent, inject, reactive, toRefs, watch} from 'vue'

export default defineComponent({
  name: 'RegistTerminal',
  components: { productAndPriceDetailView, agentInfo, productAndPriceInfoView },
  props: {
    detailData: {
      type: Object,
      default: {},
    },
  },
  setup(props) {
    const api = inject('api')
    const route = useRoute()

    var data = reactive({
      datas: {},
      list: [],
      isDirect: false,
      agentProduct: {},
      detailDrawer: null,
      agent: {},
      agentId: 0,
      isAgent: false,
    })

    const tradePriceClick = () => {
      console.log(data.datas)
      data.isAgent = false
      data.detailDrawer.open()
      // api.signedAgent.AGENT_PRODUCT_DETAIL(data.datas.agentProductId).then(res => {
      //   if (!res.code && res.data) {
      //     data.agentProduct = res.data.agentProduct
      //     data.isAgent = false
      //     data.detailDrawer.open()
      //   }
      // })
      // api.channelAgent.POTENTIALAGENT_DETAIL(data.datas.agentId).then(res => {
      //   if (!res.code && res.data) {
      //     data.agent = res.data.agent
      //   }
      // })
    }

    const agentClick = () => {
      data.agentId = data.datas.agentId
      data.isAgent = true
      data.detailDrawer.open()
      // api.channelAgent.POTENTIALAGENT_DETAIL(data.datas.agentId).then(res=>{
      //     if (!res.code && res.data){
      //
      //         data.agent = res.data.agent
      //         data.isAgent = true
      //         data.detailDrawer.open()
      //     }
      // })
    }

    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval && newval.data) {
          console.log(newval.data)
          if (newval.data.AgentProductRes) {
            // data.datas = newval.data.AgentProductRes
            // data.list = newval.data.List
            data.isDirect = false
          } else if (newval.data.List) {
            // data.datas = newval.data.List[0]
            // data.list = newval.data.List
            data.isDirect = true
          }

          data.datas = newval.data.List[0]
          data.list = newval.data.List
        }
      },
      { immediate: true, deep: true }
    )

    return {
      ...toRefs(data),
      route,

      tradePriceClick,
      agentClick,
    }
  },
})
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";
.audit--registTerminal-view {
  .mainColor {
    color: $active-color;
  }
}
</style>
